<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        /* background-color: rgb(240, 108, 122); */

    }

    .headbox {
        display: flex;
        width: 100%;
        height: 40px;
        background-color: rgb(240, 108, 122);


    }

    .textHeader {
        /* width: 100%; */
        height: 20px;
        color: #ffff;
        font-size: 16px;
        text-align: center;
        margin-top: 10px;
        margin-left: 27%;
        /* flex: 1; */

    }

    .leftlabel img {
        width: 20px;
        height: 20px;
        margin-top: 10px;
        margin-left: 30px;
    }

    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .anchorbox {
        border: 2px dotted rgb(244, 124, 136);
        width: 330px;
        height: 92px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: 20px;
        margin-top: 30px;
        background: #ffffff;
    }

    .redborder {
        width: 330px;
        /* height: 92px; */
        /* margin-left: 20px; */

    }

    .msg {
        width: 100px;
        font-size: 12px;
        position: relative;
        /* top: 10px; */
        height: 23px;
        margin-left: 5px;
        margin-top: 3px;
        font-weight: 300;
    }

    .anchor-msg {
        position: relative;

        width: 170px;
        height: 70px;
        margin-top: 30px;



    }

    .anchorname {
        width: 100px;
        font-weight: 500;
        font-size: 15px;
        height: 18px;
        color: black;
        margin-left: 5px;
        margin-top: -10px;

    }

    .anchor {
        width: 80px;
        height: 80px;
    }

    .anchor img {
        width: 80px;
        height: 80px;
    }

    .btn {
        width: 80px;
        height: 30px;
        background-color: rgb(244, 124, 136);
        border-radius: 25px;
        font-size: 13px;
        /* margin-left: 95px; */
        margin-top: 37px;
        border: none;

    }

    .footer {
        margin-top: 500px;
        display: flex;
        width: 100%;
        height: 65px;
        background-color: ghostwhite;
        justify-content: space-around;


    }

    .price {
        font-size: 13px;
        color: red;
        padding: 5px 0;
        /* margin-top: 10px; */

    }

    /* .labelL {
        margin-right: 230px;
    } */



    .labelL img {
        width: 30px;
        height: 30px;
    }

    .labelR img {
        width: 30px;
        height: 30px;
    }
</style>

<body>
    <!-- <div class="big"> -->
    <header class="headbox">
        <div class="leftlabel">
            <img src="../img/向左_返回.png">

        </div>

        <div class="textHeader">商品列表</div>

    </header>
    <main>
        <div class="redborder">
            <div class="anchorbox">
                <div class="anchor">
                    <img src="../img/卡通头像.png">
                </div>
                <div class="anchor-msg">

                    <div class="anchorname">
                        华为mate60
                    </div>
                    <div class="msg">
                        介绍信息
                    </div>
                    <div class="price">
                        ￥ 3866

                    </div>

                </div>
                <button class="btn">删除</button>

            </div>
        </div>
    </main>



    <footer>
        <div class="footer">
            <div class="leftbox">
                <div class="labelL">
                    <img src="../img/列表.png">
                </div>
                <div id="callback">列表</div>
            </div>
            <div class="rightbox">
                <div class="labelR">
                    <img src="../img/添加.png">
                </div>
                <div id="addgoods">添加</div>
            </div>
        </div>
    </footer>

    <!-- </div> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script>

                   document.querySelector('.leftlabel').addEventListener('click', function () {
                    location.href = './商品列表.html'
                   })

        // 获取用户ID
        let data = localStorage.getItem('data');
        let userId = (JSON.parse(data)).account
        console.log(userId);

        let addgoods = document.querySelector('#addgoods');
        let callback = document.querySelector('#callback');
        addgoods.addEventListener('click', function () {
            location.href = './添加商品.html';
        })
        callback.addEventListener('click', function () {
            location.href = './登录.html';
        })

        let list = [];
        axios.get('http://8.137.157.16:9000/goods/list', { params: { userId: userId } })
            .then(function (res) {
                console.log(res);
                list = res.data.data;
                let createList = list.map(function (item, index) {
                    let anchorboxDom = document.createElement('div');
                    anchorboxDom.className = 'anchorbox';
                    document.querySelector('.redborder').appendChild(anchorboxDom);


                    let anchor = document.createElement('div');
                    anchor.className = 'anchor';
                    anchorboxDom.appendChild(anchor);

                    let imgBox = document.createElement('img')
                    anchor.appendChild(imgBox)
                    imgBox.src = item.img


                    let anchor_msg = document.createElement('div');
                    anchor_msg.className = 'anchor_msg';
                    anchorboxDom.appendChild(anchor_msg);


                    let anchorname = document.createElement('div');
                    anchor_msg.appendChild(anchorname);
                    anchorname.className = 'anchorname';
                    anchorname.innerText = item.title;

                    let msg = document.createElement('div');
                    anchor_msg.appendChild(msg);
                    msg.className = 'msg';
                    msg.innerText = item.desc_text;

                    let price = document.createElement('div');
                    anchor_msg.appendChild(price);
                    price.className = 'price';
                    price.innerText = `￥${item.current_price}`;



                    let deletebtn = document.createElement('button');
                    anchorboxDom.appendChild(deletebtn);
                    deletebtn.className = 'btn';
                    deletebtn.innerText = '删除';





                    deletebtn.addEventListener('click', function () {
                        console.log(item.id);
                        let dataId = { userId: userId, goodsId: item.id }
                        let xhr = new XMLHttpRequest();
                        xhr.open('post', 'http://8.137.157.16:9000/goods/del');
                        xhr.setRequestHeader('content-type', 'application/json');
                        xhr.send(JSON.stringify(dataId));
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState == 4 && xhr.status == 200) {
                                console.log(xhr.responseText);
                                location.href = './商品列表.html'
                            }
                        }
                    })


                    //进入详情页面
                    anchor.addEventListener('click', function () {
                        console.log('goodid', item.id);
                        location.href = `./商品详情.html?${item.id}`
                    })
                    anchorname.addEventListener('click', function () {
                        console.log('goodid', item.id);
                        location.href = `./商品详情.html?${item.id}`
                    })
                    price.addEventListener('click', function () {
                        console.log('goodid', item.id);
                        location.href = `./商品详情.html?${item.id}`
                    })
                    msg.addEventListener('click', function () {
                        console.log('goodid', item.id);
                        location.href = `./商品详情.html?${item.id}`
                    })

                    return item
                });




                }).catch(function (err) {
                    console.log(err);


                })



    </script>

</body>

</html>